<!-- 列表 -->
<template>
    <div id="cardList" :class="loading || data.length === 0 ? 'hp100' : ''">
        <template v-if="data.length > 0">
            <Card class="item" v-for="(item, index) in tableData" dis-hover :key="index">
                <div class="item-fist-line">
                    <h4 class="line-left">
                        <Checkbox v-if="showCheckbox" v-model="item.checked"
                            @on-change="(state) => changeItemState(state, item)"
                            :disabled="disabledAllBtn || item.disabled"></Checkbox>
                        <span class="no" v-show="!hiddenIndex">{{ handleProIndex(index) }}、</span>
                        <div class="extra-item mr20 flex" v-for="column in topLeftColumns"
                            :key="`top-left-${column.key}`" v-if="getShow(column,item)">
                            <span class="key" v-if="column.title"> {{ column.title }}：</span>
                            <template v-if="column.type != 'render'">
                                <template v-if="column.tooltip && item[column.key] && item[column.key] !== 0">
                                    <Tooltip :max-width="400" transfer :content="getContent(item, column)"
                                        placement="top-start">
                                        <span class="value text-ellipsis" :style="{ width: column.width + 'px' }">{{
                                            getContent(item, column)}}</span>
                                    </Tooltip>
                                </template>
                                <template v-else>
                                    <span class="value text-ellipsis"
                                        :style="{ width: column.width + 'px' }">{{getContent(item, column)}}</span>
                                </template>
                            </template>
                            <span class="pre">
                                <card-render v-if="column.type == 'render'" :render="column.render" :index="index"
                                    :row="item" :column="column">
                                </card-render>
                            </span>
                        </div>
                        <slot></slot>
                    </h4>
                    <div class="line-right">
                        <div class="extra-info flex">
                            <div class="extra-item ml20 flex" v-for="column in topRightColumns"
                                :key="`top-right-${column.key}`" v-if="getShow(column,item)">
                                <span class="key" v-if="column.title">{{ column.title }}：</span>
                                <template v-if="column.type != 'render'">
                                    <template v-if="column.tooltip && item[column.key] && item[column.key] !== 0">
                                        <Tooltip :max-width="400" transfer :content="getContent(item, column)"
                                            placement="top-start">
                                            <span class="value text-ellipsis"
                                                :style="{ width: column.width + 'px' }">{{getContent(item, column)
                                                }}</span>
                                        </Tooltip>
                                    </template>
                                    <template v-else>
                                        <span class="value text-ellipsis"
                                            :style="{ width: column.width + 'px' }">{{getContent(item, column)}}</span>
                                    </template>
                                </template>
                                <span class="value pre" :style="{ width: column.width + 'px' }"
                                    v-if="column.type == 'render'"><card-render :render="column.render" :index="index"
                                        :row="item" :column="column">
                                    </card-render>
                                </span>
                            </div>
                        </div>
                        <div class="action">
                            <div class="extra-item ml20" v-for="column in actionColumns" :key="`render-${column.key}`"
                                v-if="getShow(column,item)">
                                <span class="value" v-if="column.type != 'render'">
                                    {{ item[column.key] }}
                                </span>
                                <span class="pre">
                                    <card-render v-if="column.type == 'render'" :render="column.render" :index="index"
                                        :row="item" :column="column">
                                    </card-render>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item-infos" v-if="bottomColumns.length > 0">
                    <div class="info flex" style="position:relative" v-for="column in bottomColumns"
                        :key="`bot-render-${column.key}`" v-if="getShow(column,item)">
                        <span class="key" v-if="column.title">{{ column.title }}：</span>
                        <template v-if="column.type != 'render'">
                            <template v-if="column.tooltip && item[column.key] && item[column.key] !== 0">
                                <Tooltip :max-width="400" transfer :content="getContent(item, column)" placement="top-start">
                                    <a v-if="column.type === 'download'" class="value text-ellipsis"
                                        :style="{ width: column.width + 'px' }" :href="column.getPath(item)" download>{{
                                        getContent(item, column)}}</a>
                                    <span v-else class="value text-ellipsis"
                                        :style="{ width: column.width + 'px' }">{{getContent(item, column)}}</span>
                                </Tooltip>
                            </template>
                            <template v-else-if="column.type === 'download' && item[column.key]">
                                <a :href="column.getPath(item)" download>{{getContent(item, column)}}</a>
                            </template>
                            <template v-else>
                                <span class="value text-ellipsis"
                                    :style="{ width: column.width + 'px' }">{{getContent(item, column)}}</span>
                            </template>
                        </template>
                        <template v-if="column.type == 'render'">
                            <span class="value pre" v-if="column.type == 'render'"
                                :style="{ width: column.width + 'px' }" style="position:relative">

                                <card-render :render="column.render" :index="index" :row="item" :column="column">
                                </card-render>
                            </span>
                        </template>
                    </div>
                </div>
            </Card>
        </template>
        <template v-if="data.length == 0">
            <NoData :loading="loading" :noDataText="noDataText"> </NoData>
        </template>
    </div>
</template>

<script>
    import CardRender from './cardRender';
    import TableTooltip from '@/view/drill_compete/page/tableTooltip.vue';
    import NoData from '@/components/common/no-data';
    export default {
        name: 'courseList',
        props: {
            'data': {
                type: Array,
                default: () => []
            },
            'columns': {
                type: Array,
                default: () => []
            },
            'page': {
                type: Number,
                default: 1
            },
            'pageSize': {
                type: Number,
                default: 10
            },
            'showCheckbox': {
                type: Boolean,
                default: false
            },
            'disabledAllBtn': {
                type: Boolean,
                default: false
            },
            'pageSelect': {
                type: Boolean,
                default: false
            },
            'hiddenIndex': {
                type: Boolean,
                default: false
            },
            'loading': {
                type: Boolean,
                default: false
            },
            'noDataText': {
                type: String,
                default: '暂无信息'
            }
        },
        components: { CardRender, TableTooltip, NoData },
        data() {
            return {
                value: [],
                selectIds: [],
                recordSelectedIds: []
            };
        },
        watch: {
            columns(columns) {
                columns.forEach((column) => {
                    if (!column.placement) {
                        this.$set(column, 'placement', 'bottom');
                    }
                    if (column.render) {
                        this.$set(column, 'type', 'render');
                    }
                });
            },
        },
        filters: {},
        computed: {
            tableData: function () {
                return this.pageSelect
                    ? this.data.map((d) => {
                        if (this.selectIds.includes(d.id)) {
                            d.checked = true;
                        }
                        return d;
                    })
                    : this.data;
            },
            bottomColumns() {
                return this.columns
                    .filter((column) => column.placement == 'bottom')
                    .sort((a, b) => a.order - b.order);
            },
            topLeftColumns() {
                return this.columns
                    .filter((column) => column.placement == 'top-left')
                    .sort((a, b) => a.order - b.order);
            },
            topRightColumns() {
                return this.columns
                    .filter((column) => column.placement == 'top-right' && !column.action)
                    .sort((a, b) => a.order - b.order);
            },
            actionColumns() {
                return this.columns
                    .filter((column) => column.placement == 'top-right' && column.action)
                    .sort((a, b) => a.order - b.order);
            },
            checklist() {
                let ret = [];
                this.data.forEach((item) => {
                    if (item.checked) {
                        ret.push(item.id);
                    }
                });
                return ret;
            },
        },
        created() {
            this.columns.forEach((column) => {
                if (!column.placement) {
                    this.$set(column, 'placement', 'bottom');
                }
                if (column.render) {
                    this.$set(column, 'type', 'render');
                }
            });
        },
        mounted() { },
        beforeDestroy() { },
        methods: {
            /*分页选择功能2021-8-24*/
            //当前选择函数,如果要取选中的id,直接在使用页面取本页面的this.selectIds的值
            changeItemState(state, item) {
                if (state) {
                    //如果是选中
                    if (item.notes) {
                        item.notes.forEach((its) => {
                            if (!this.selectIds.includes(its.id)) {
                                this.selectIds.push(its.id);
                            }
                        });
                    } else {
                        if (!this.selectIds.includes(item.id)) {
                            this.selectIds.push(item.id);
                        }
                    }
                } else {
                    //如果是取消
                    if (item.notes) {
                        item.notes.forEach((its) => {
                            let index = this.selectIds.findIndex((f) => f === its.id);
                            if (index !== -1) {
                                this.selectIds.splice(index, 1);
                            }
                        });
                    } else {
                        let index = this.selectIds.findIndex((f) => f === item.id);
                        if (index !== -1) {
                            this.selectIds.splice(index, 1);
                        }
                    }
                }
                this.$emit('on-check', state, item);
                this.$emit('handleMultiple', this.selectIds);
                this.recordSelectedIds = [...this.selectIds];
            },
            //分页回显函数

            // 取消全选
            cancelAll() {
                this.data.forEach((item) => {
                    item.checked = false;
                });
            },
            // 全选
            checkedAll() {
                this.data.forEach((item) => {
                    item.checked = true;
                });
            },
            getShowColumns(placement) {
                return this.columns
                    .filter((column) => column.placement == placement)
                    .sort((a, b) => a.order - b.order);
            },
            // 计算index
            handleProIndex(key) {
                if (this.page && this.pageSize) {
                    return (this.page - 1) * this.pageSize + key + 1;
                } else {
                    return key + 1;
                }
            },
            getShow(col) {
                return typeof col.show === 'function' ? col.show() : col.show !== false ? true : false;
            },
            getContent(item, column) {
                return column.filter
                    ? column.filter(item[column.key], item)
                    : item[column.key] || item[column.key] === 0
                        ? item[column.key]
                        : '无';
            },
            // 清空所有已选
            clearChooseAll() {
                this.selectIds = []
                this.cancelAll()
            },
            // 取消指定选项
            cancelChoose(id) {
                this.data.forEach((item) => {
                    if(item.id == id) {
                        item.checked = false
                    }
                })
                this.selectIds.splice(this.selectIds.indexOf(id),1)
            }
        },
        destroyed() { },
    };
</script>

<style scoped>
    #cardList /deep/ .ivu-tooltip-inner {
        overflow-wrap: break-word;
    }

    .extra-info {
        flex-wrap: wrap;
    }

    .extra-info .extra-item {
        align-items: center;
    }

    .flex {
        display: flex !important;
        align-items: center;
    }

    .flex .key {
        width: max-content;
    }

    .item-infos .value {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .flex .value.pre {
        flex: 1;
    }

    #cardList {
        max-height: calc(100vh - 60px - 54px - 62px - 40px);
        overflow-y: auto;
    }

    #cardList>>>.ivu-card {
        position: unset;
    }

    #cardList>>>.ivu-card .ivu-tooltip-popper {
        width: max-content;
    }

    .sceneDetail #cardList {
        max-height: initial;
    }

    .ml20 {
        margin-left: 20px;
    }

    .mr20 {
        margin-right: 20px;
    }

    .pd0 {
        padding: 0px;
    }

    .item {
        border: 2px solid #e7e7f1;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .item:last-child {
        margin-bottom: 0;
    }

    #cardList /deep/ .ivu-card-body {
        padding: 10px 15px;
    }

    .item-fist-line {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .line-left {
        flex: 1;
        min-width: 200px;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .line-left .text-ellipsis {
        white-space: pre !important;
    }

    .line-right {
        display: flex;
        flex-wrap: wrap;
        color: #a4a3c4;
    }

    .line-right .action {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .item-infos {
        display: flex;
        flex-wrap: wrap;
        margin-top: 7px;
        align-items: center;
        /*height:20px;*/
    }

    .info {
        /*display: flex;*/
        margin-right: 20px;
        color: #a4a3c4;
    }

    .info span {
        display: inline-block;
    }

    li.info:after {
        display: none;
    }

    .tableTooltip {
        /*width:100%;*/
        /*max-width: 300px;*/
        display: inline-block;
        vertical-align: top;
        line-height: 21px;
        height: 21px;
    }

    .tooltipContent {
        white-space: normal;
        word-break: break-all;
    }

    .showContent {
        /*max-width: 200px;*/
        white-space: nowrap;
        word-break: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .action button.ivu-btn-text {
        border: none;
        background: none;
        outline: none;
    }

    *[disabled] {
        cursor: not-allowed;
    }

    .extra-item {
        display: inline-block;
    }

    .extra-item .value {
        /*width: 80px;*/
        display: inline-block;
    }

    .extra-item>>>.ivu-tooltip .ivu-tooltip-rel,
    .item-infos>.info>>>.ivu-tooltip .ivu-tooltip-rel {
        display: flex;
    }

    #quickCreateProgress .ivu-progress {
        width: auto;
    }

    .pre {
        white-space: pre;
    }

    .pre /deep/ .ivu-tooltip {
        white-space: pre-line;
    }

    .hp100 {
        height: 100%
    }
</style>
<style>
    #cardList .ivu-card-body {
        padding: 10px 15px;
    }
    
</style>
